<template>
	<section class="iscroll-wrap" ref="wrapper" @click="bubbling" :style="{'height': `${height}px`}">
		<article class="content" ref="content">
			<slot>
				<p>我是iScroll组件</p>
			</slot>
		</article>
		<div class="scroll-bar-wrap" :class="{'hidden': !scrollbarShow}">
			<p class="scroll-bar" ref="scrollbar" :style="{'height': `${scrollBarH}px`}"></p>
		</div>
	</section>
</template>
<script>
	export default {
		name: 'iScroll',
		props:{
			height: {
				type: Number,
				default: 0
			},
			direction:{
				type: String,
				default: 'y'
			}
		},
		data () {
			return {
				contentH: 0,//内容列表的高度
				scrollbarShow: true,//用来判断是否显示scrollbar
				scrollBarH: 40,//滚动条的高度
				clientHeight: 0,//可以滚动的高度
				attr: '',//滚动的方向 top | left
				scroll: 0,
				list: '',
			}
		},
		mounted () {
			var that = this;
			// 获取元素
			this.list = document.getElementsByClassName('list')[0];
			
			
			//初始化 
			this.settings();
			this.list.style.position= "relative";
			this.attr = this.direction.toLowerCase() == 'y' ? 'top' : 'left';
			var obj1 = {};
			var obj2 = {};
			// 绑定鼠标事件
			if (!window.mousewheel){
				this.$refs['wrapper'].addEventListener('mousewheel', function(e){
					// 阻止默认行为
                	var e = e || window.event;
                	e.preventDefault();
                	if (this.scrollbarShow) return;
                	
                	if(e.wheelDelta <= 0) {//scroll down
                		// 步长
                		 that.scroll -= 100;
                		 //判断是否到了底部 到了进行限制
                		that.scroll <= -that.clientHeight ? that.scroll = -that.clientHeight : null;

                		// 给滚动条和list赋值
                		var scrollbarT = (parseFloat(that.scroll / that.clientHeight) * that.height) + that.scrollBarH;
                		obj1[that.attr] = -scrollbarT;
                		
	                	that.$move(that.$refs['scrollbar'], obj1)
	                	obj2[that.attr] = that.scroll
                		that.$move(that.list, obj2)
                	} else {//scroll up
                		// 步长
                		that.scroll += 100;
                		//判断是否到了顶部 进行限制
                		that.scroll >= 0 ? that.scroll = 0 : null;
						var t = 'top';
                		// 给滚动条和list赋值
                		var scrollbarT = parseFloat(that.scroll / that.clientHeight) * that.height;
						
						obj1[that.attr] = -scrollbarT
	                	that.$move(that.$refs['scrollbar'],obj1)

						obj2[that.attr] = that.scroll
                		that.$move(that.list, obj2)
                	}
                	// var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
                	// (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox
					
				}, false);
			}else {
				this.$refs['wrapper'].addEventListener('DOMMouseScroll', function(e){
					console.log('3333', e.wheelDelta)
				}, false);

			}
			
			// 浏览器窗口大小变化的时候跟新设置
			window.addEventListener('resize',()=> that.settings(), false);
		},
		methods: {
			bubbling(e){
				var that = this;
				// 跟新设置
				this.settings()
				
			},
			settings(){
				//初始化 内容的高度大于wrap的高度 显示scrollbar
				this.$nextTick(function(){
					// 重新获取内容的高度
					this.contentH = document.getElementsByClassName('list')[0].offsetHeight;
					if(this.contentH > this.height) {
						// 显示
						this.scrollbarShow = true
						this.clientHeight = this.contentH - this.height;
						this.setScrollBar()
					} else {
						this.clientHeight = 0;
						this.scrollbarShow = false;
					}
				})
				// 设置scrollBar
			},
			setScrollBar(){
				console.log('set', typeof  this.direction)
				// 设置scrollBar的高度
				var attr = this.direction.toLowerCase() == 'y' ? 'height' : 'width';
				this.scrollBarH = this[attr] - this.clientHeight;
				this.scrollBarH = this.scrollBarH <= 40 ? 40 : this.scrollBarH;

				this.$refs['scrollbar'].style[attr] = `${this.scrollBarH}px`;
			},
			css(obj, attr) {
				if (obj.currentStyle) {
					return obj.currentStyle[attr];
				} else {
					return getComputedStyle(obj, false)[attr];
				}
			}
		},
		coumputed:{

		}

	}
</script>

<style lang="less">
	@import url("../../assets/css/variable.less");
	@import url("../../assets/css/public.less");
	.iscroll-wrap{
		&{
			position: relative;
			overflow: hidden;
		}
		.scroll-bar-wrap{
			position: absolute;
			.transition(@duration: .5s);
			right: 0;
			top: 0;
			width: 8px;
			height: 100%;

			background: @main-dark-bg;
		}
		.scroll-bar{
			position: absolute;
			right: 2px;
			top: 0;
			width: 4px;
			height: 80px;
			border-radius: 2px;
			cursor: pointer;
			background: @border-color;
		}
		.hidden{
			opacity: 0;
			display: none;
		}
	}

	/* 自定义滚动条样式 */
</style>
